<template>
  <div class="common-upload-list" :style="{ width, height, 'line-height': height }" v-for="(item, i) in uploadList" :key="i">
    <template v-if="item.status === 'finished'">
      <Image :src="item.url" fit="cover" width="100%" height="100%" />
      <div class="common-upload-list-cover">
        <Icon type="ios-eye-outline" @click="handleView(item.name)"></Icon>
        <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
      </div>
    </template>
    <template v-else>
      <Progress
        v-if="item.showProgress"
        :percent="item.percentage"
        hide-info
      ></Progress>
    </template>
  </div>
  <Upload
    ref="uploadRef"
    :show-upload-list="false"
    :on-success="handleSuccess"
    :format="['jpg', 'jpeg', 'png']"
    :max-size="maxSize * 1024"
    :on-format-error="handleFormatError"
    :on-exceeded-size="handleMaxSize"
    :before-upload="handleBeforeUpload"
    multiple
    accept=".jpg, .png, .jpeg"
    type="drag"
    :action="UPLOAD_API"
    :style="{ display: 'inline-block', width }"
  >
    <div
      :style="{ width, height, 'line-height': height }"
      v-if="uploadList.length < limit"
    >
      <Icon type="ios-camera" size="20"></Icon>
    </div>
  </Upload>
  <!-- <ImagePreview v-model="visible" :preview-list="['https://file.iviewui.com/images/' + imgName]" /> -->
</template>
<script setup>
import { ref, watch } from 'vue';
import { Message } from 'view-ui-plus';

// 定义属性
const props = defineProps({
  value: {
    type: Array, 
    default: () => []
  },
  // 图片宽
  width: {
    type: String,
    default: '60px',
  },
  // 图片高
  height: {
    type: String,
    default: '60px',
  },
  // 限制上传数量
  limit: {
    type: Number,
    default: 1,
  },
  // 限制图片大小1*1024
  maxSize: {
    type: Number,
    default: 2,
  },
});

const UPLOAD_API = '';
const imgName = ref('');
const visible = ref(false);
const uploadList = ref(props.value);
const uploadRef = null;

// 定义事件
const emit = defineEmits(['input:value'])

watch(() => props.value, (val) => {
  uploadList.value = val
})
watch(uploadList, (val) => {
  emit('input:value', val)
})

// 预览
const handleView = (name) => {
  imgName.value = name;
  visible.value = true;
};
// 删除
const handleRemove = (file) => {
  const fileList = uploadRef.value.fileList;
  uploadRef.value?.fileList.splice(fileList.indexOf(file), 1);
};
// 成功
const handleSuccess = (res, file) => {
  console.log(file)
};
// 选择类型错误
const handleFormatError = (file) => {
  Message.error('请选择图片');
};
// 超出限制大小
const handleMaxSize = (file) => {
  Message.error('超出限制大小');
};
// 上传前
const handleBeforeUpload = (file) => {
  const check = uploadList.value.length < props.limit;
  if (!check) {
    Message.error('超出限制数量');
  }
  return check;
};

</script>
<style>
.common-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.common-upload-list img {
  width: 100%;
  height: 100%;
}
.common-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.common-upload-list:hover .common-upload-list-cover {
  display: block;
}
.common-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
